<template>
  <div class="z-menu" :class="{ collapsed: collapsed }">
    <div class="z-menu-innner scrollbar">
      <a-menu
        show-collapse-button
        v-model:collapsed="collapsed"
        @menu-item-click="handleMenuItemClick"
        v-model:selected-keys="selectedKeys"
        v-model:open-keys="openKeys"
        accordion
      >
        <z-recursion-item :list="state.menuList"></z-recursion-item>
      </a-menu>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import { IconHome, IconUser, IconCommon } from "@arco-design/web-vue/es/icon";
import { collapsed } from "@/components/admin/z-menu";
import zMenuitem from "@/components/common/z-menuitem.vue";
import { useRoute, useRouter } from "vue-router";
import type { MenuItem } from "@/types/admin/menu.d.ts";
import { userStorer } from "@/stores/user_store";
const userStore = userStorer();
import ZRecursionItem from "@/components/admin/z-recursion-item.vue";
const router = useRouter();
const route = useRoute();

const openKeys = ref<string[]>([]);
const selectedKeys = ref<string[]>([]);

const initRoute = () => {
  if (route.matched.length === 3) {
    openKeys.value = [route.matched[1].name as string];
  }
  selectedKeys.value = [route.name as string];
};
initRoute();
const state = reactive({
  menuList: [
    {
      title: "首页",
      name: "Home",
      icon: IconHome,
    },
    {
      title: "地图",
      name: "Map",
      icon: IconHome,
      children: [
        {
          title: "高德",
          name: "Gaode",
          icon: "iconfont icon-gaodeditu",
        },
        {
          title: "百度",
          name: "Baidu",
          icon: "iconfont icon-baiduditu",
        },
        {
          title: "腾讯",
          name: "Tenxun",
          icon: "iconfont icon-hangzhengquyuguanli",
        },
      ],
    },
    {
      title: "系统",
      name: "System",
      icon: IconHome,
      children: [
        {
          title: "用户管理",
          name: "SystemUser",
          role: 1,
          icon: IconUser,
        },
        {
          title: "角色管理",
          name: "SystemRole",
          icon: IconUser,
        },
      ],
    },
  ] as MenuItem[],
});

console.log(route);
watch(
  () => route.name,
  () => {
    initRoute();
  },
  {
    immediate: true,
  }
);

const handleMenuItemClick = (key: string) => {
  console.log("handleMenuItemClick", key);
  router.push({ name: key });
};
</script>
<style scoped lang="less">
.z-menu {
  height: calc(100vh - 90px);
  position: relative;

  &.collapsed {
    :deep(.arco-menu-collapse-button) {
      left: 48px !important;
    }
  }

  &:hover {
    :deep(.arco-menu-collapse-button) {
      opacity: 1 !important;
    }
  }
  .z-menu-innner {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    .arco-menu {
      position: inherit;

      :deep(.arco-menu-collapse-button) {
        top: 50%;
        transform: translate(-50%, -50%);
        left: 240px;
        opacity: 0;
        transition: all 0.3s;
      }
    }
  }
}
</style>
